<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>物料产品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <el-container>
        <el-aside width="200px">


            <el-input style="margin-top:35px" v-model="queryItem.itemTypeName" placeholder="只能选择最小分支" />
            <el-tree ref="itemTypeTree" :data="itemTypes" node-key="itemTypeId" default-expand-all @node-click="getTypeName"
                :props="defaultProps" />
        </el-aside>
        <el-main>
            <!--  搜索栏开始 -->
            <!-- //绑定queryItem[]数组 -->
            <el-form style="margin-top: 15px;" :inline="true" :model="queryItem" class="demo-form-inline">
                <el-form-item label="物料产品编码">
                    <!-- //传入queryItem.itemName,queryItem.itemName -->
                    <el-input v-model="queryItem.itemCode" placeholder="请输入物料产品编码" clearable />
                </el-form-item>
                <el-form-item label="物料产品名">
                    <!-- //传入queryItem.itemName,queryItem.itemName -->
                    <el-input v-model="queryItem.itemName" placeholder="请输入物料产品名称" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="loadItems"><el-icon>
                            <Search />
                        </el-icon>搜索</el-button>
                    <el-button @click="cleanItems"><el-icon>
                            <Refresh />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
            <!--  搜索栏结束 -->

            <!-- 工具栏开始 -->
            <div class="flex" style="margin-top: 10px;">
                <el-button title="新增物料产品" @click="this.addItemDialogVisible = true" type="primary">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button title="修改选中物料产品" @click="handlerEdits" type="success">
                    <el-icon>
                        <EditPen />
                    </el-icon>
                    修改
                </el-button>
                <el-button title="删除选中物料产品" @click="deleteItems" type="danger"><el-icon>
                        <Delete />
                    </el-icon>
                    删除
                </el-button>
                <el-button title="导出选中物料产品" @click="printItems" type=""><el-icon>
                        <Download />
                    </el-icon>
                    导出
                </el-button>
            </div>
            <!-- 工具栏结束 -->

            <!-- 表格 开始 -->
            <el-table ref="itemTable" :data="items" max-height="800px" stripe="true" border="true"
                style="width: 100%;margin-top: 10px;">
                <el-table-column type="selection" width="55" />
                <el-table-column label="物料产品编码" property="itemCode" />
                <el-table-column label="物料产品名称" property="itemName" />
                <el-table-column label="规格型号" property="specification" />
                <el-table-column label="单位" property="unitOfMeasure" />
                <el-table-column label="物料/产品" property="itemOrProduct" />
                <el-table-column label="所属分类" property="itemTypeName" />

                <el-table-column label="是否启用" property="enableFlag">
                    <template #default="scope">
                        <!-- scope.row 就是整行数据-->
                        <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                        <el-tag v-else class="ml-2" type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="设置安全库存" property="safeStockFlag">
                    <template #default="scope">
                        <!-- scope.row 就是整行数据-->
                        <el-tag v-if="scope.row.safeStockFlag == 'Y'" class="ml-3" type="success">是</el-tag>
                        <el-tag v-else class="ml-3" type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column width="200px" align="center" label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                            title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger"><el-icon>
                                        <Delete />
                                    </el-icon>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格 结束 -->
            <!-- 分页栏开始 -->
            <el-pagination style="margin-top: 15px;" :page-size="limit" :pager-count="10" @current-change="changePage"
                background layout="prev, pager, next" :total="total" />
            <!-- 分页栏结束 -->



            <!-- 添加物料产品的弹窗窗体开始-->
            <el-dialog v-model="addItemDialogVisible" title="添加物料产品" width="1000" align-center>
                <!-- 添加物料产品的表单 -->
                <el-form label-width="100px" :model="newItem" style="max-width: 900px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="物料产品编码">
                                <el-input v-model="newItem.itemCode" />
                            </el-form-item>
                        </el-col>
                        <el-form-item label="自动编码">
                            <el-switch v-model="newItem.itemCode" />
                        </el-form-item>
                        <el-col :span="10">
                            <el-form-item label="物料产品名称" label-width="150px">
                                <el-input v-model="newItem.itemName" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="规格型号">
                        <el-input v-model="newItem.specification" type="textarea" />
                    </el-form-item>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="单位">
                                <el-select v-model="newItem.unitOfMeasure" placeholder="选择单位">
                                    <el-option label="kg" value="kg" />
                                    <el-option label="米" value="米" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="物料/产品分类" label-width="150px">
                                <el-tree-select v-model="newItem.itemTypeName" :data="itemTypes"
                                    :render-after-expand="false" :props="defaultProps" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="是否有效">
                                <el-radio-group v-model="newItem.enableFlag">
                                    <el-radio label="Y" :value="Y">是</el-radio>
                                    <el-radio label="N" :value="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="安全库存">
                                <el-radio-group v-model="newItem.safeStockFlag">
                                    <el-radio label="Y" :value="Y">是</el-radio>
                                    <el-radio label="N" :value="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="备注">
                        <el-input v-model="newItem.remark" type="textarea" />
                    </el-form-item>
                    <el-text>
                        <p>这里添加功能需要点击两次才能实现添加</p>
                    </el-text>

                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddItem">取消</el-button>
                        <el-button type="primary" @click="doAddItem">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 添加物料产品的弹窗窗体结束-->




            <!-- 修改物料产品的弹窗窗体开始-->
            <el-dialog v-model="itemEditDrawer" title="添加物料产品" width="1000" align-center>
                <!-- 添加物料产品的表单 -->
                <el-form label-width="100px" :model="editItem" style="max-width: 900px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="物料产品编码">
                                <el-input v-model="editItem.itemCode" />
                            </el-form-item>
                        </el-col>
                        <el-form-item label="自动编码">
                            <el-switch v-model="editItem.itemCode" />
                        </el-form-item>
                        <el-col :span="10">
                            <el-form-item label="物料产品名称" label-width="150px">
                                <el-input v-model="editItem.itemName" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="规格型号">
                        <el-input v-model="editItem.specification" type="textarea" />
                    </el-form-item>
                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="单位">
                                <el-select v-model="editItem.unitOfMeasure" placeholder="选择单位">
                                    <el-option label="kg" value="kg" />
                                    <el-option label="米" value="米" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="物料/产品分类" label-width="150px">

                                <el-tree-select v-model="editItem.itemTypeName" :data="itemTypes"
                                    :render-after-expand="false" :props="defaultProps" clearable />

                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="10">
                            <el-form-item label="是否有效">
                                <el-radio-group v-model="editItem.enableFlag">
                                    <el-radio label="Y" :value="Y">是</el-radio>
                                    <el-radio label="N" :value="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="安全库存">
                                <el-radio-group v-model="editItem.safeStockFlag">
                                    <el-radio label="Y" :value="Y">是</el-radio>
                                    <el-radio label="N" :value="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="备注">
                        <el-input v-model="editItem.remark" type="textarea" />
                    </el-form-item>
                    <!-- <el-text>这里所属分类 和 单位未成功实现,还未实现BOM组成
                        <p>这里的修改功能,只能修改分类名,修改不了id,code(好像是异步导致)</p>
                    </el-text> -->

                </el-form>





                <el-tabs type="border-card">
                    <el-tab-pane label="BOM组件"  :model="bomItemId">
                        <!-- 工具栏开始 -->
                        <div class="flex" style="margin-top: 10px;">
                            <el-button title="新增客户" @click="this.addBomItemDialogVisible = true" type="primary">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                                新增
                            </el-button>

                            <el-button title="删除选中客户" @click="deleteBomItems" type="danger"><el-icon>
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>

                        </div>
                        <!-- 工具栏结束 -->
                        <el-table ref="bomItemTable" :data="bomItems" max-height="800px" stripe="true" border="true"
                            style="width: 100%;margin-top: 10px;">
                            <el-table-column type="selection" width="55" />
                            <el-table-column label="物料编码" property="bomItemCode" />
                            <el-table-column label="物料名称" property="bomItemName" />
                            <el-table-column label="规格" property="bomItemSpec" />
                            <el-table-column label="单位" property="unitOfMeasure" />
                            <el-table-column label="使用比例" property="quantity" />
                            <el-table-column label="备注" property="remark" />
                            <el-table-column width="200px" align="center" label="操作">
                                <template #default="scope">
                                    <el-button size="small" @click="handleEditBomItem(scope.row)"><el-icon>
                                            <EditPen />
                                        </el-icon>编辑</el-button>
                                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                        @confirm="handleDeleteBomItem(scope.row)" title="您是否要删除这行数据">
                                        <template #reference>
                                            <el-button size="small" type="danger"><el-icon>
                                                    <Delete />
                                                </el-icon>删除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 表格 结束 -->
                    </el-tab-pane>
                    <el-tab-pane label="供应商">供应商</el-tab-pane>
                    <el-tab-pane label="替代品">替代品</el-tab-pane>
                    <el-tab-pane label="SIP">SIP</el-tab-pane>
                    <el-tab-pane label="SOP">SOP</el-tab-pane>
                </el-tabs>




                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddItem">取消</el-button>
                        <el-button type="primary" @click="doItemEdit">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 修改物料产品的弹窗窗体结束-->
        </el-main>
    </el-container>
</template>
<script>
import itemRequest from '../../../aip/md/item-api.js';
import itemtypeRequest from '../../../aip/md/itemType-api.js';
import bomItemRequest from '../../../aip/md/bomItem-api.js';
export default {
    data() {
        return {
            items: [],
            // 查询参数
            page: 1,
            limit: 10,
            total: 0,
            maxPageNum: 1,
            queryItem: {},
            newItem: {}, // 新添加的物料产品对象
            addItemDialogVisible: false,// 弹窗的属性
            itemEditDrawer: false, // 标记编辑物料产品的窗体是否显示
            direction: 'rtl',// 抽屉的方向
            editItem: {}, // 当前正在编辑的物料产品对象 
            bomItemId:{},

            // 分类树需要的数据

            // defaultProps: {
            //     children: 'children',
            //     label: 'itemTypeName',
            // },
            defaultProps: {
                value: "itemTypeId",
                children: 'children',
                label: 'itemTypeName',
            },
            itemTypes: [],
            setedItemTypes: [],// 已经被分配的分类编号 
            itemTypeName: '',

            bomItems: [],
            // 查询参数

            

        }
    },
    methods: {
        // 加载物料产品
        getTypeName(node) {
            console.log(node.itemTypeId);
            console.log(node.itemTypeName);
            this.queryItem.itemTypeId = node.itemTypeId;
            this.queryItem.itemTypeName = node.itemTypeName;
            this.loadItems();
            console.log("这是queryItem" + this.queryItem.itemTypeId + this.queryItem.itemTypeId);
        },
        loadItems() {


            //axios调用

            itemRequest.list(this.page, this.limit, this.queryItem, data => {
                console.log(data); // 这里的data就是我们的PerRequest对象
                // 取出分页的数据
                let pager = data.data;
                this.items = pager.data;//改
                this.total = pager.total;
                this.maxPageNum = pager.maxPageNum;
            });


        },

        /**
        * 分页栏的按钮事件
        * @param {} currPage  最新的页码
        */
        changePage(currPage) {
            this.page = currPage;
            this.loadItems();
        },
        // 重置清空
        cleanItems() {
            this.queryItem = {};
            this.loadItems();
        },
        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据 
        */
        handleEdit(row) {
            // 显示抽屉弹窗
            // console.log(this.editItem.enableFlag);
            // 通过id加载要编辑的物料产品信息
            this.loadItemTypes();
            console.log(row);
            console.log(this.itemTypes);
            this.bomItemId.itemId=row.itemId;
            itemRequest.get(row.itemId, res => {
                this.editItem = res.data;
                // console.log(this.editItem.enableFlag);
                // 显示抽屉弹窗 
                
                this.itemEditDrawer = true;
            });
            this.loadBomItems();
        },
        /**
            * 物料产品编辑提交按钮事件
            */
        doItemEdit() {
            itemtypeRequest.getByName(this.editItem, res => {
                console.log(res.data);
                console.log("这里是修改查看名字相对应的id code....");

                this.editItem.itemTypeId = res.data.itemTypeId;
                this.editItem.itemTypeCode = res.data.itemTypeCode;
                this.editItem.itemOrProduct = res.data.itemOrProduct;
                console.log(this.editItem);
            })
            // 提交editItem即可
            console.log("查看存入的editItem.....");
            itemRequest.edit(this.editItem, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑物料产品成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.itemEditDrawer = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将editItem制空
                    this.editItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '物料产品名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },

        /**回调函数后,将后端数据传给前端
         * 添加物料产品的提交按钮事件
         */
        doAddItem() {
            console.log(this.newItem);


            itemtypeRequest.getByName(this.newItem, res => {
                console.log(res.data);
                this.newItem.itemTypeId = res.data.itemTypeId;
                this.newItem.itemTypeCode = res.data.itemTypeCode;
                this.newItem.itemOrProduct = res.data.itemOrProduct;
                console.log(this.newItem);
            })


            // 物料产品数据 this.newItem
            itemRequest.saveItem(this.newItem, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加物料产品成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addItemDialogVisible = false;
                    // 重新加载数据
                    this.loadItems();
                    // 将newItem制空
                    this.newItem = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '物料产品名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },
        loadItemTypes() {
            itemtypeRequest.getAll(res => {
                this.itemTypes = res.data;
                // console.log(this.itemTypes);
            });
        },
        /**
        * 行编辑按钮事件
        * @param {*} row 整行数据
        */
        handleDelete(row) {
            itemRequest.delete(row.itemId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadItems();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },


        /**
        * 批量删除物料产品的工具按钮事件
        */
        deleteItems() {
            // 获取表格对象
            let table = this.$refs.itemTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的itemId的数组
            let itemIds = [];
            //遍历添加到要删除的数组push
            selectionRows.forEach(item => {
                itemIds.push(item.itemId);
            });

            // 调用API进行删除
            itemRequest.deleteSelect(itemIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadItems();
            });
        },
        // 加载客户
        loadBomItems() {

            console.log("输出editItem"+this.bomItemId.itemId);
            //axios调用
            bomItemRequest.listBomItem(this.bomItemId, data => {
                console.log(data); // 这里的data就是我们的PerRequest对象
                this.bomItems = pager.data;//改
            });


        },

        /**
        * 分页栏的按钮事件
        * @param {} currPage  最新的页码
        */
        changePage(currPage) {
            this.page = currPage;
            this.loadBomItems();
        },
        // 重置清空
        cleanBomItems() {
            this.queryBomItem = {};
            this.loadBomItems();
        },










    }, mounted() {
        this.loadItems();
        this.loadItemTypes();
    }
}
</script> 
<style scoped></style>